前面我們介紹了透過Ajax連接後端API窗口，也介紹了web API連接第三方應用功能，呈現在我們的網頁上面，而今天最後要介紹的就是這個Fetch API，Fetch API同樣的功能為向web服務器發送HTTP請求!
<!DOCTYPE html>
<html>
<body>
<p id="demo">抓取檔案內容改變這段文字。</p>
<script>
let file = "/demo/js/fetch_info.txt"
fetch (file)
.then(x => x.text())
.then(y => document.getElementById("demo").innerHTML = y);
</script>
</body>
</html>
上面的範例為fetch需要設定的街口，獲取後一樣透過.then()方法接受結果，是不是跟前面非常像似呢?對的沒錯，同樣利用非同步的概念，將等待結果回傳後再繼續執行。
<!DOCTYPE html>
<html>
<body>
<p id="demo">抓取檔案內容改變這段文字。</p>
<script>
getText("/demo/js/fetch_info.txt");
async function getText(file) {
let x = await fetch(file);
let y = await x.text();
document.getElementById("demo").innerHTML = y;
}
</script>
</body>
</html>
上述的範例我們可以更清楚的了解到我們先等待連結接口，完成後再將結果存取!
那我們最後一篇的鐵人賽就到這邊了，感謝這30天來大家的共同努力!還有許多不足的地方等待去加強理解，讓我們在之後一起繼續努力吧!
iThome鐵人賽
看影片追技術